<template>
  <div class="wrap">
    <div class="header">
      <div class="left">

        <el-select
          v-model="queryParams.status"
          placeholder="请选择"
          size="small"
          class="header-select"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="已使用" :value="1"></el-option>
          <el-option label="未使用" :value="2"></el-option>
        </el-select>

      </div>
      <div class="right">

        <el-button type="" size="small" icon="el-icon-invitaion" @click="showInviteCode">生成邀请码</el-button>

      </div>

    </div>
    <div class="content">
      <el-table
        v-loading="loading"
        :data="data"
        border
      >
        <el-table-column
          prop="id"
          label="序号"
          align="center"
          min-width="80"
        >
          <template slot-scope="{row}">
            店铺名（用户名）
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNum"
          label="邀请码"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="stickNum"
          label="生成时间"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="stockNum"
          label="状态"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="money"
          label="店铺"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="用户"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="income"
          label="备注"
          align="center"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          prop="admin"
          label="操作"
          align="center"
          min-width="150"
        >
        </el-table-column>
      </el-table>
      <div class="page-wrap">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="count"
          @current-change="getData"
        >
        </el-pagination>
      </div>


    </div>
    <el-dialog
      title="新增邀请码"
      :visible.sync="dialogInvite"
      :before-close="closeInviteDialog"
    >
      <div style="margin-bottom: 10px">
        <img src="~@/assets/images/invitaion-icon.png" alt="" width="35">
        <span style="font-size: 16px">新的邀请码为:</span>
      </div>
      <div>
        <el-input style="width: 200px;margin-right: 20px" size="small" v-model="currentCode" @keyup.native="codePattern"></el-input>
        <el-button type="small" @click="createInviteCode">随机生成</el-button>
        <el-button type="small" @click="pushInviteCode">添加</el-button>
      </div>
      <div>
        <h4>新邀请码记录：</h4>
        <el-table
          :data="inviteData"
          border
        >
          <el-table-column
            label="序号"
            align="center"
            width="50"
          >
            <template slot-scope="{$index}">
             {{$index+1}}
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="邀请码"
            align="center"
          >
            <template slot-scope="{row}">
              <div v-show="row.isEdit === false">
                 <span style="margin-right: 10px">
                {{row.code}}
              </span>
                <el-tag type="warning" style="cursor:pointer;margin-right: 10px;" @click="copyContent(row.code)">复制</el-tag>
                <el-tag style="cursor: pointer" @click="editCode(row)">编辑</el-tag>
              </div>
              <div v-show="row.isEdit === true">
                  <el-input v-model="row.editCode" :ref="row.code" @keyup.native="codePattern" @blur="checkEditCode($event,row)"></el-input>
              </div>


            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center"
          >
            <template slot-scope="{row}">
              <el-input v-model="row.remark" placeholder="可填写备注"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogInvite = false">取 消</el-button>
        <el-button type="primary" @click="saveInviteData">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {copyToClipboard, deepCopy, generateRandomString} from "@/utils";

export default {
  name: "userList",
  data(){
    return {
      queryParams:{
        page: 1,
        pageSize: 20,
        status : '',
      },
      data:[],
      count:0,
      dialogInvite:false,
      inviteForm:{

      },
      inviteData:[
        {
          code: '',
          editCode: '', // 要编辑的code
          remark: '',
          isEdit:false,
        }
      ],
      currentCode: '', // 当前邀请码
    }
  },
  created() {
    this.getData()
  },
  methods:{
    // 获取表单数据
    getData(){
      this.data = [
        {}
      ]
    },
    // 显示邀请码生成的dialog
    showInviteCode(){
      this.dialogInvite = true;
      const code = generateRandomString()
      this.inviteData = [
        {
          code: code,
          editCode: code, // 要编辑的code
          remark: '',
          isEdit:false,
        }
      ];
    },
    // 随机生成一个邀请码
    createInviteCode(){
      this.currentCode = generateRandomString()
    },
    // 邀请码只能填写数字和字母
    codePattern(e){
      e.target.value = e.target.value.replace(/[^0-9A-Za-z]/g,'');
    },
    // 把随机邀请码添加到inviteData里
    pushInviteCode(){
      this.currentCode = this.currentCode.replace(/[^0-9A-Za-z]/g,'');
      if(this.currentCode === ""){
        this.$errorMessage("邀请码不能为空")
        return;
      }
      // 校验是否有重复值
      for (const item of this.inviteData) {
        if(item.code === this.currentCode){
          this.$errorMessage(`${item.code}已存在，请更改邀请码`)
          return;
        }
      }
      this.inviteData.push({
        code: this.currentCode,
        editCode: this.currentCode,
        remark: '',
        isEdit: false,
      })
      this.currentCode = '';
    },
    // 编辑邀请码 查看是否有重复值
    checkEditCode(e,row){
      for (const item of this.inviteData) {
        if(item.code === row.code){
          continue;
        }
        if(item.code === row.editCode){
          this.$errorMessage(`${item.code}已存在，请更改邀请码`)
          row.editCode = row.code;
          e.target.focus()
          return;
        }
      }
      row.code = row.editCode
      row.isEdit = false;
    },
    // 复制内容
    copyContent(content){
      if(!content){
        return;
      }
      copyToClipboard(content)
        .then(res=>{
          this.$successMessage('复制成功');
        })
        .catch(res=>{
          this.$errorMessage('复制失败');
        })
    },
    // 修改邀请码
    editCode(row){
      row.isEdit = true;
      this.$nextTick(()=>{
        this.$refs[row.code].focus();
      })
    },
    // 关闭邀请码dialog
    closeInviteDialog(done){
      this.$warning('确定要离开此窗口吗？')
        .then(res=>{
          this.dialogInvite = false;
        })
        .catch(res=>{
        })
    },
    // 保存邀请码
    saveInviteData(){
      const saveParams = deepCopy(this.inviteData)
      if(saveParams.length === 0){
        this.$errorMessage("请至少添加一个邀请码")
      }
      // 请求

      this.dialogInvite = false; // 闭关窗口
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
}
.header-select{
  margin-right: 20px;
}
</style>
